<template>
    <div class="my-approval-container">
      <!-- 顶部日期选择 -->
      <div class="apply-top">
        <van-field
          v-model="value3"
          readonly
          clickable
          label="申请日期"
          placeholder="请选择日期"
          @click="showDatePicker = true"
        />
        <van-popup v-model="showDatePicker" position="bottom">
          <van-datetime-picker
            type="date"
            @confirm="onDateConfirm"
            @cancel="onDateCancel"
          />
        </van-popup>
      </div>
  
      <!-- 列表内容 -->
      <div class="case-list">
        <template v-if="list.length > 0">
          <div 
            v-for="(item, index) in list" 
            :key="index"
            class="section" 
            @click="goDetail(item)"
          >
            <div class="flex jB">
              <span>{{ item.applyTime || '--' }}</span>
              <span v-if="item.applyStatus == 1" class="status-pending">待审批</span>
              <span v-if="item.applyStatus == 4" class="status-waiting">待领取</span>
              <span v-if="item.applyStatus == 6" class="status-complete">已领取</span>
              <span v-if="item.applyStatus == 5" class="status-reject">已驳回</span>
              <span v-if="item.applyStatus == 3" class="status-cancel">已撤回</span>
            </div>
          </div>
  
          <!-- 加载提示 -->
          <div v-if="isLoading" class="bottom-tip">加载中...</div>
          <div v-else-if="total === 0" class="bottom-tip">暂无数据</div>
          <div v-else-if="list.length >= total" class="bottom-tip">已加载全部数据~</div>
        </template>
      </div>
    </div>
  </template>
  
  <script>
  import { getListData } from '@/api/goodsRequisitionLog'
  
  export default {
    name: 'GoodsRequisitionLog',
    
    data() {
      return {
        value3: '',
        showDatePicker: false,
        list: [],
        total: 0,
        isLoading: true,
        hasNextPage: true,
        pageNum: 1,
        pageSize: 20
      }
    },
  
    created() {
      this.getList()
    },
  
    methods: {
      getList() {
        const params = {
          openSessionId: JSON.parse(localStorage.getItem('user'))?.openSessionId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          applyBeginTime: this.value3
        }
  
        getListData(params)
          .then(res => {
            if (res.code === 200) {
              this.list = res.rows
              this.total = res.total
              this.hasNextPage = res.pageNum < res.totalPage
              this.isLoading = false
            }
          })
          .catch(err => {
            console.error(err)
            this.isLoading = false
          })
      },
  
      onDateConfirm(date) {
        this.value3 = this.formatDate(date)
        this.showDatePicker = false
        this.resetAndReload()
      },
  
      onDateCancel() {
        this.showDatePicker = false
        this.value3 = ''
        this.resetAndReload()
      },
  
      resetAndReload() {
        this.pageNum = 1
        this.list = []
        this.getList()
      },
  
      goDetail(item) {
        this.$router.push({
          path: '/goodsRequisitionDetail',
          query: { id: item.id }
        })
      },
  
      formatDate(date) {
        const d = new Date(date)
        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .my-approval-container {
    background: #f5f5f5;
    padding-top: 10px;
    min-height: 100vh;
  }
  
  .apply-top {
    margin-bottom: 10px;
    background: #fff;
  }
  
  .section {
    border-radius: 10px;
    margin: 10px;
    padding: 15px;
    background: white;
    border: 1px solid #ddd;
  
    .flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }
  }
  
  .bottom-tip {
    height: 60px;
    text-align: center;
    line-height: 50px;
    color: #999;
    font-size: 14px;
  }
  
  .status {
    &-pending { color: #ff8832; }
    &-waiting { color: #4498ff; }
    &-complete { color: #30d147; }
    &-reject { color: #ed5454; }
    &-cancel { color: #cccccc; }
  }
  </style>